<template>
  <div class="block">
    <!-- 功能栏  -->
    <div class="views-tool">
      <div class="tool-left">
        <el-form
          :inline="true"
          size="default"
          :model="state.queryForm"
          @keyup.enter="getDataList()"
        >
          <el-form-item>
            <el-input
              v-model="state.queryForm.columnType"
              placeholder="字段类型"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="state.queryForm.attrType"
              placeholder="属性类型"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="layout-padding m-t-0 p-t-0">
      <el-card>
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          style="width: 100%"
          @selection-change="selectionChangeHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="columnType"
            label="字段类型"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="attrType"
            label="属性类型"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="packageName"
            label="属性包名"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            align="center"
            width="150"
          >
            <template #default="scope">
              <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)"
                >编辑</el-button
              >
              <el-button type="primary" link @click="deleteBatchHandle(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-5"
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
        >
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update
          ref="addOrUpdateRef"
          @refresh-data-list="getDataList"
        ></add-or-update>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { IHooksOptions } from "/@/hooks/interface";
import { useCrud } from "/@/hooks";
import AddOrUpdate from "./add-or-update.vue";
import {getEnv} from '/@/utils/mms';
const state: IHooksOptions = reactive({
  dataListUrl: getEnv() + "/gen/fieldType/page",
  deleteUrl: getEnv()  + "/gen/fieldType",
  queryForm: {
    columnType: "",
    attrType: "",
    packageName: "",
  },
});

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const {
  getDataList,
  selectionChangeHandle,
  sizeChangeHandle,
  currentChangeHandle,
  deleteBatchHandle,
} = useCrud(state);
const init = (id: number) => {
  getDataList();
};
defineExpose({
  init,
});
</script>
